<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include ::header('用户信息')"></head>
<body class="gray-bg">
<div class="panel-group">
	<div class="panel-default panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#dqpb1" data-toggle="collapse" data-parent="#accordion">1.th:each 这里是查询所有用户页面</a>
			</h4>
		</div>
		<div id="dqpb1" class="panel-collapse collapse">
			<div class="panel-body">
				<a th:href="@{/crud/user}"><h3 class="btn btn-primary btn-success">添加</h3></a>
				<table class="table table-bordered" >
					<thead>
					<tr>
						<th>th:text=${user.id}=>Id</th>
						<th th:utext="'[[${user.name}]]行内样式name'"></th>
						<th>th:text="${user.gender}==0?'女':'男'"gender</th>
						<th>birthday</th>
						<th>department</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="user:${users}">
						<td th:text="${user.id}"></td>
						<td>[[${user.name}]]</td>
						<td th:text="${user.gender}==0?'女':'男'"></td>
						<td th:text="${#dates.format(user.birth,'yyyy-MM-dd')}"></td>
						<td th:text="${user.department.name}"></td>
						<td>
							<a th:href="@{/crud/user/}+${user.id}" class="bottom btn btn-success">编辑</a>
							<button th:attr="del_uri=@{/crud/user/}+${user.id}" type="submit"
							        class="bottom btn btn-danger deleteBtn">删除
							</button>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="panel-default panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#dqpb2" data-toggle="collapse" data-parent="#accordion">2. 使用bootStrap表格</a></h4>
		</div>
		<div id="dqpb2" class="panel-collapse collapse">
			<div class="container-div">
				<div class="row">
					<div class="col-sm-12 search-collapse">
						<form id="form1">
							<div class="select-list">
								<ul>
									<li>
										用户名称：<input type="text" name="userName"/>
									</li>
									<li>
										<a class="btn btn-primary btn-rounded btn-sm"
										   onclick="$.table.search('form1', 'bootstrap-table1')"><i
												class="fa fa-search"></i>&nbsp;搜索</a>
										<a class="btn btn-warning btn-rounded btn-sm"
										   onclick="$.form.reset('form1', 'bootstrap-table1')"><i
												class="fa fa-refresh"></i>&nbsp;重置</a>
									</li>
								</ul>
							</div>
						</form>
					</div>
					<div class="btn-group-sm" id="toolbar1" role="group">
						<a class="btn btn-success">
							<i class="fa fa-plus"></i> 新增
						</a>
						<a class="btn btn-primary">
							<i class="fa fa-edit"></i> 修改
						</a>
						<a class="btn btn-danger">
							<i class="fa fa-remove"></i> 删除
						</a>
					</div>
					<div class="col-sm-12 select-table table-striped">
						<table id="bootstrap-table1" data-mobile-responsive="true"></table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="panel-default panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a th:href="@{/page/operlogS}">3. 服务端分页</a></h4>
		</div>
	</div>

	<div class="panel-default panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a th:href="@{/page/operlogC}">4. 客户端端分页</a></h4>
		</div>
	</div>

	<div class="panel-default panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a th:href="@{/pageUser/users}">5. ry-ui.js</a></h4>
		</div>
	</div>
	<form id="deleteUserForm" method="post">
		<input type="hidden" name="_method" value="delete">
	</form>
</div>


<th:block th:include="include :: footer"/>
<script>
    $(".deleteBtn").click(function () {
        //删除指定员工
        $("#deleteUserForm").attr("action", $(this).attr("del_uri")).submit();
    });
</script>
<script th:inline="javascript">
    prefix = ctx + "crud";
    $(function () {
        var options = {
            id: "bootstrap-table1",
            toolbar: "toolbar1",
            url: prefix + "/list",
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '用户ID'
                },
                {
                    field: 'gender',
                    title: '用户性别'
                },
                {
                    field: 'name',
                    title: '用户姓名'
                },
                {
                    field: 'birth',
                    title: '用户生日'
                },
                {
                    field: 'department.name',
                    title: '用户部门'
                },
                // {
                //     field : 'userBalance',
                //     title : '用户余额'
                // },
                // {
                //     field: 'status',
                //     title: '用户状态',
                //     align: 'center',
                //     formatter: function(value, row, index) {
                //     	return $.table.selectDictLabel(datas, value);
                //     }
                // },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>